<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>复杂表单</title>
  <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" />
  <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" />
  <link rel="stylesheet" href="../../layuiAdmin/style/admin1.css" />
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    #formAdvForm .layui-form-item {
      margin-top: 20px;
      margin-bottom: 0;
    }

    #formAdvForm .layui-form-item .layui-inline {
      margin-bottom: 25px;
      margin-right: 0;
    }

    .form-group-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px 20px;
      background-color: #fff;
      box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
    }

    .layui-form-label {
      white-space: nowrap;
    }

    .h1 {
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>

<body>

  <!-- 正文开始 -->
  <form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
    <div class="layui-fluid" style="padding-bottom: 75px;">
      <div class="layui-card">
        <div class="layui-card-header">隐患详情</div>
        <div class="layui-card-body">
          <div class="h1">隐患描述：矿井充水性图中13070软岩保护层机巷与己三东翼回风下山交叉处上下位置不明确(交叉处己三东翼回风下山应断开)。</div>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">隐患档案</div>
        <div class="layui-card-body">
          <!-- 分布表单开始 -->
          <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="formStepsStep" style="max-width: 650px;">
            <!-- 标题 -->
            <ul class="layui-tab-title">
              <li class="layui-this">
                <i class="layui-icon layui-icon-ok">1</i>
                <span class="layui-steps-title">上报</span>
                <span class="layui-steps-content">上报</span>
              </li>
              <li>
                <i class="layui-icon layui-icon-ok">2</i>
                <span class="layui-steps-title">整改</span>
                <span class="layui-steps-content">整改</span>
              </li>
              <li>
                <i class="layui-icon layui-icon-ok">3</i>
                <span class="layui-steps-title">复查</span>
                <span class="layui-steps-content">复查</span>
              </li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <!-- 表单一 -->
                <form class="layui-form" style="max-width: 460px;margin: 0 auto;padding: 40px 30px 0 0;">
                  <table class="layui-table">
                    <colgroup>
                      <col width="150">
                      <col width="200">
                      <col>
                    </colgroup>
                    <thead>
                      <tr>
                        <th>昵称</th>
                        <th>加入时间</th>
                        <th>签名</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>贤心</td>
                        <td>2016-11-29</td>
                        <td>人生就像是一场修行</td>
                      </tr>
                      <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                      </tr>
                    </tbody>
                  </table>

                </form>
              </div>
              <div class="layui-tab-item">
                <!-- 表单二 -->
                <form class="layui-form" style="max-width: 460px;margin: 0 auto;padding: 40px 30px 0 0;">
                  <table class="layui-table">
                    <colgroup>
                      <col width="150">
                      <col width="200">
                      <col>
                    </colgroup>
                    <thead>
                      <tr>
                        <th>昵称</th>
                        <th>加入时间</th>
                        <th>签名</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>贤心</td>
                        <td>2016-11-29</td>
                        <td>人生就像是一场修行</td>
                      </tr>
                      <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                      </tr>
                    </tbody>
                  </table>
                </form>
              </div>
              <div class="layui-tab-item text-center" style="padding-top: 40px;">
                <!-- 表单三 -->
                <i class="layui-icon layui-icon-ok layui-circle"
                  style="background: #52C41A;color: #fff;font-size:30px;font-weight:bold;padding: 20px;line-height: 80px;"></i>
                <div style="font-size: 24px;color: #333;margin-top: 30px;">操作成功</div>
                <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                <div style="text-align: center;margin: 50px 0 25px 0;">
                  <button class="layui-btn" data-steps="next">再转一笔</button>
                  <button class="layui-btn layui-btn-primary">查看账单</button>
                </div>
              </div>
            </div>
          </div>
          <!-- //分布表单结束 -->

        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">隐患档案详细记录</div>
        <div class="layui-card-body">
          <div class="h1">2021-05-07 13:39:19</div>
        </div>
      </div>

    </div>

    <div class="form-group-bottom text-right">
      <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
      <button class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;提交&emsp;</button>
      <button class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;保存&emsp;</button>
      <button class="layui-btn" lay-filter="formAdvClose" lay-submit
        onclick="parent.layer.closeAll()">&emsp;关闭&emsp;</button>
    </div>

  </form>

  <!-- js部分 -->
  <script type="text/javascript" src="../../layuiAdmin/layui/layui.all.js"></script>
  <script>
    layui.config({
      base: '/layuiAdmin/modules/'
    }).use(['layer', 'form', 'table', 'laydate', 'steps'], function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var laydate = layui.laydate;
      var steps = layui.steps;
      laydate.render({
        elem: '#date1'

      });
      /* 监听表单提交 */
      form.on('submit(formAdvSubmit)', function (data) {
        // 验证表格选择
        var checkRows = table.checkStatus('formAdvTable');
        if (checkRows.data.length === 0) {
          layer.tips('请至少选择一位成员', '#formAdvTable+.layui-table-view .layui-table-header th:eq(0) div', { tips: [1, '#ff4c4c'] });
          return false;
        }
        // 表格选择的数据放到data.field中
        data.field.checkUsers = checkRows.data;
        layer.msg(JSON.stringify(data.field));
        return false;
      });

    });
  </script>
</body>

</html>